<template>
  <FullPageModal v-model:visible="innerVisible" :custom-footer="true" :title="title" @ok="ok" @cancel="cancel">
    <div ref="content" class="w-px-1 mx-auto">
      <div class="flex flex-col items-center">
        <p class="text-xl text-color-main font-semibold">{{ mesDetail.title || "--" }}</p>
        <p class="text-sm text-color-secondary font-normal">{{ mesDetail.createdOn || "--" }}</p>
        <div class="w-full h-full overflow-auto whitespace-pre-line" v-html="mesDetail.content"> </div>
      </div>
    </div>
    <template #footer> </template>
  </FullPageModal>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import FullPageModal from "/@/components/FullPageModal.vue";
import { PartialNotifiItem } from "/@/api/aiot/notifiManage/models";
import { platformById, companyById } from "/@/api/aiot/notifiManage";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    message: PartialNotifiItem;
    adviceType?: string;
    title?: string;
  }>(),
  {
    adviceType: "PLATFORM",
    title: "企业通知详情",
  }
);
const emits = defineEmits(["create", "update:visible", "load"]);
const innerVisible = ref(false);
const mesDetail = ref<PartialNotifiItem>({
  title: "",
  createdOn: "",
  content: "",
});
watch(
  () => props.visible,
  async (v) => {
    innerVisible.value = v;
    if (v) {
      if (props.adviceType === "PLATFORM") {
        mesDetail.value = (await platformById(props.message.id || "")) || {};
      } else if (props.adviceType === "COMPANY") {
        mesDetail.value = (await companyById(props.message.id || "")) || {};
      }
      emits("load", mesDetail.value);
    }
  }
);
let firstShow = true;
watch(innerVisible, (v) => {
  emits("update:visible", v);
  if (firstShow) {
    firstShow = false;
  }
  if (!v) {
    mesDetail.value = {
      title: "",
      createdOn: "",
      content: "",
    };
  }
});
//窗口关闭
function cancel() {
  emits("update:visible", false);
}
const content = ref<HTMLDivElement>();
function ok(isContinue) {}
</script>
